<template>
    <div class="storage">
        <el-button @click="fullScreen">全屏</el-button>
        <el-button @click="handleAdd">添加</el-button>
        <div class="storage-title">
            <div
                v-for="item in ['cookie', 'session', 'loacl']"
                :key="item"
                class="storage-title-text"
            >
                {{ item }}
            </div>
        </div>
        <div class="storage-table">
            <div
                v-for="(item, index) in tablesData"
                :key="index"
                class="storage-table-content"
            >
                <el-table :data="item" border height="calc(100vh - 200px)">
                    <el-table-column
                        label="属性"
                        prop="key"
                        width="80px"
                    ></el-table-column>
                    <el-table-column
                        label="内容"
                        prop="value"
                    ></el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'StorageName',
    data() {
        return {
            bc: null,
            cookieData: [],
            sessionData: [],
            localData: [],
        }
    },
    computed: {
        tablesData() {
            return [this.cookieData, this.sessionData, this.localData]
        },
    },
    created() {
        // 标签间使用 BroadcastChannel 通信
        this.bc = new BroadcastChannel('myBroadcast')
        this.bc.onmessage= this.handleMessage

        this.cookieData = this.getCookies()
        this.sessionData = this.getSessionStorage()
        this.localData = this.getLoaclStorage()
        console.log(window)
        console.log(window.parent)
        window.onstorage = (event) => {
            console.log('storage change:', event);
        }
    },
    beforeDestroy() {
        this.bc.onmessage = null
    },
    methods: {
        fullScreen() {
            if (document.fullscreenElement) {
                document.exitFullscreen()
            } else {
                document.documentElement.requestFullscreen()
            }
        },
        handleMessage(event) {
            if (event.data) {
                console.log('message', event)
            }
        },
        handleAdd() {
            /* document.cookie += `;add=${Math.floor(
                Math.random() * Math.pow(10, 6)
            ).toString(16)}` */
            /* window.cookieStore.set({
                name: 'add',
                value: Math.floor(Math.random() * Math.pow(10, 6)).toString(16),
            }).then(res => {
                console.log('set cookie add success', res);
            }).catch(error => {
                console.log('set cookie add fail', error);
            }) */
            localStorage.setItem(
                'add',
                Math.floor(Math.random() * Math.pow(10, 6)).toString(16)
            )
            sessionStorage.setItem(
                'add',
                Math.floor(Math.random() * Math.pow(10, 6)).toString(16)
            )
            /* window.frames.forEach((item) => {
                item.postMessage({ addCookieAndStorage: true }, '*')
            }) */
            // window.frames.postMessage({ addCookieAndStorage: true }, '*')
            this.bc.postMessage({ addCookieAndStorage: true }, '*')
        },
        getCookies() {
            const cookies = document.cookie.split(';')
            /* window.cookieStore.getAll().then((info) => {
                console.log(info)
            }).catch(err => {
                console.log(err);
            }) */
            return cookies.map((item) => {
                const contents = item.split('=')
                return { key: contents[0], value: contents[1] }
            })
        },
        getSessionStorage() {
            const sessions = sessionStorage
            return Object.keys(sessions).map((item) => {
                return { key: item, value: sessions[item] }
            })
        },
        getLoaclStorage() {
            const locals = localStorage
            return Object.keys(locals).map((item) => {
                return { key: item, value: locals[item] }
            })
        },
    },
}
</script>
<style lang="scss" scoped>
.storage {
    .storage-title {
        display: flex;
        justify-content: space-around;
        font-size: large;
    }
    .storage-table {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        .storage-table-content {
            width: 33%;
        }
    }
}
</style>
